<template>
  <div class="machine-con d-flex">
    <div class="mr-3 mb-3 card" v-for="(item, index) in machines" :key="index">
      <div class="d-flex">
        <div class="mr-4">
          <img class="img" :src="nj1" alt="">
        </div>
        <div class="mr-3">
          <div class="mb-3 d-flex jc-between">
            <p class="mr-3"><span class="description">农机类型:</span>{{ getNjNameByType(item.d10) }}</p>
            <p><span class="description">设备编号:</span>{{ item.d2 }}</p>
          </div>
          <div>
            <div class="mb-3 d-flex jc-between">
              <p class="mr-3"><span class="description">车辆编号:</span>{{ item.d1 }}</p>
              <p><span class="description">车辆品牌型号:</span>{{ item.d3 }}</p>
            </div>
            <div class="mb-3 d-flex jc-between">
              <p class="mr-3"><span class="description">联系人:</span>{{ item.d8 }}</p>
              <p><span class="description">联系方式:</span>{{ item.d9 }}</p>
            </div>
          </div>
          <div>
            <span><span class="description">安装时间:</span>{{ item.d13 }}</span>
          </div>
          <!-- <el-row :gutter="16" class="mt-4">
            <el-col :span="6">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="定位"
                placement="bottom"
              >
                <img class="icon" :src="localtion" alt="" @click="getWorkList(item)">
              </el-tooltip>
            </el-col>
            <el-col :span="6">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="轨迹"
                placement="bottom"
              >
                <img class="icon" :src="track" alt="" @click="getTrackList(item)">
              </el-tooltip>
            </el-col>
          </el-row> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import { post, get, deletePost } from "@/public/request/api";
export default defineComponent({
  components: {
  },
  setup() {
    //变量
    // 生命周期
    const machines = ref([])
    const nj1 = require('@/assets/img/nj1.jpg')
    const nj2 = require('@/assets/img/nj2.jpg')
    const localtion = require('@/assets/img/location1.png')
    const track = require('@/assets/img/track.png')
    onMounted(() => {
      getNjList()
    });

    onUnmounted(() => {

    });

    //methods
    function getNjList() {
      get("/bi/findCarByList", {}).then(() => {
      }).catch(err => {
        machines.value = err.result
      })
    }

    function getWorkList(val) {
      get("/bi/findJobInfoByList", {deviceId:val.d2}).then(() => {
      }).catch(err => {
        console.log(err.result);
      })
    }

    function getCameraList() {
      get("/bi/monitorDeviceList", {}).then(() => {
      }).catch(err => {
        console.log(err.result);
      })
    }

    function getTrackList(val) {
      get("/bi/queryLine", {deviceId:val.d2}).then(() => {
      }).catch(err => {
        console.log(err.result);
      })
    }

    const getNjNameByType = (val) => {
      let type = ''
      switch (val) {
        case '1':
          type = '拖拉机'
          break;
        case '2':
          type = '收获机'
          break;
        case '3':
          type = '植保机'
          break;
        case '4':
          type = '其他'
          break;
        case '5':
          type = '插秧机'
          break;
        case '6':
          type = '播种机'
          break;
        case '7':
          type = '开沟机'
          break;
        case '8':
          type = '灭茬机'
          break;
        case '9':
          type = '穴播机'
          break;
        case '10':
          type = '搂草机'
          break;
        case '11':
          type = '无人机'
          break;
        case '12':
          type = '制肥机'
          break;
        case '13':
          type = '烘干机'
          break;
        default:
          break;
      }
      return type
    }

    // return
    return {
      getNjList,
      machines,
      nj1,
      nj2,
      localtion,
      track,
      getWorkList,
      getCameraList,
      getTrackList,
      getNjNameByType
    };
  },
});
</script>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.machine-con {
  flex-wrap: wrap;

  .card {
    background: rgba(255, 255, 255, 0.08);
    padding: 12px;
    border-radius: 10px;
    position: relative;
    z-index: 20;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;

    .img {
      border-radius: 10px;
      width: 200px;
      height: 200px;
    }
  }

  .card:hover {
    box-shadow: rgba(88, 143, 190, 0.48) 3px 1px 8px 0px, rgba(88, 143, 190, 0.48) -3px -1px 8px 0px;
  }

  .description {
    color: #c8c8c8;
  }

  .icon {
    width: 24px;
    height: 24px;
  }
}
</style>